<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Fill Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>
        var width = window.innerWidth;
        var height = window.innerHeight;

        var stage = new Konva.Stage({
            container: 'container',
            width: width,
            height: height
        });
        var layer = new Konva.Layer();

        var colorPentagon = new Konva.RegularPolygon({
            x: stage.width() / 2,
            y: stage.height() / 2,
            sides: 5,
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        /*
         * 绑定事件
         */
        colorPentagon.on('mouseover touchstart', function () {
            this.fill('blue');
            layer.draw();
        });

        colorPentagon.on('mouseout touchend', function () {
            this.fill('red');
            layer.draw();
        });

        layer.add(colorPentagon);
        stage.add(layer);

        draw();
    </script>
</body>

</html>